<template>
  <el-dialog :visible="visible" width="60%" top="1%" @close="resetForm">
    <SearchForm
      v-model="formOption.data"
      :form-option="formOption"
      :show-btn="true"
      :btn-list="btnList"
      label-width="90px"
    />

    <PageTable :loading="loading" :columns="columns" :data="dataSource" />

    <div class="footer-button">
      <Pagination
        v-show="total > 0"
        :total="total"
        :pageNo.sync="listQuery.pageNo"
        :pageSize.sync="listQuery.pageSize"
        @pagination="getCategoryList"
      />
      <div>
        <el-button @click="resetForm"> 取消 </el-button>
        <el-button type="primary" @click="submitForm"> 确定 </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import categoryMixins from '@/mixins/category-mixins'
import { mapMutations } from 'vuex'
export default {
  name: 'ClassifyPopup',
  mixins: [categoryMixins],
  components: {},
  props: {
    value: String,
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      classifyId: '',
      loading: true,
      formOption: {
        data: {
          firstId: '',
          secondId: ''
        },
        items: [
          {
            type: 'select',
            label: '分类名称',
            value: 'firstId',
            selectList: [],
            placeholder: '请选择一级分类',
            style: {
              width: '210px'
            }
          },
          {
            type: 'select',
            placeholder: '请选择二级分类',
            value: 'secondId',
            selectList: [],
            style: {
              width: '210px'
            }
          }
        ]
      },
      btnList: [
        {
          type: 'primary',
          label: '搜索',
          onClick: () => {
            this.listQuery.pageNo = 1
            this.getCategoryList()
          }
        }
      ],
      dataSource: [],
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      columns: [
        {
          label: '一级分类',
          render: (h, { row }) => {
            return <div>{row.firstName}</div>
          }
        },
        {
          label: '二级分类',
          render: (h, { row }) => {
            return <div>{row.secondName || '-'}</div>
          }
        },
        {
          label: '推荐状态',
          render: (h, { row }) => {
            return <div>{row.isRecommend ? '推荐' : '不推荐'}</div>
          }
        },
        {
          label: '操作',
          render: (h, { row }) => {
            return <el-checkbox value={row.checked} onChange={() => this.checkedChange(row)} />
          }
        }
      ]
    }
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible
      },
      set(val) {
        this.$emit('update:dialogVisible', val)
      }
    }
  },
  watch: {
    'formOption.data.firstId'(value) {
      this.formOption.data.secondId = ''
      if (value) {
        this.initCategoryTwoLevel(value)
      } else {
        this.formOption.items = this.formOption.items.map(item => {
          if (item.value === 'secondId') {
            item.selectList = []
          }
          return item
        })
      }
    }
  },
  created() {
    this.initCategoryOneLevel()
    this.getCategoryList()
  },
  methods: {
    ...mapMutations('base', ['SET_POINT_SELECT']),
    // 获取一级分类
    initCategoryOneLevel() {
      const getOneLevel = () => {
        this.formOption.items = this.formOption.items.map(ele => {
          if (ele.value === 'firstId') {
            ele.selectList = this.categoryLevelOne
          }
          return ele
        })
      }
      this.getGoodsCategoryList(getOneLevel)
    },
    // 获取二级分类
    initCategoryTwoLevel(value) {
      this.formOption.items = this.formOption.items.map(item => {
        if (item.value === 'secondId') {
          item.selectList = this.getCategoryTwoLevel(value)
        }
        return item
      })
    },
    // 获取分类列表
    async getCategoryList() {
      const params = {
        ...this.listQuery
      }
      const { firstId, secondId } = this.formOption.data
      if (firstId || secondId) {
        params.parentId = secondId ? secondId : firstId
      }
      const {
        data: { records, total }
      } = await this.$http.goods.classify.getCategoryList({ params })
      this.dataSource = records
        .map(item => {
          if (item.id == this.value?.split(',')[1]) {
            item.checked = true
          } else {
            item.checked = false
          }
          return item
        })
        .filter(item => item.firstId && item.secondId)
      this.classifyId = this.value
      this.total = total
      this.loading = false
    },
    // 单选分类
    checkedChange(val) {
      this.dataSource = this.dataSource.map(item => {
        if (val.id === item.id) {
          item.checked = true
        } else {
          item.checked = false
        }
        return item
      })
      this.classifyId = `${val.firstId},${val.secondId}`
    },
    // 选择分类后确认
    submitForm() {
      if (!this.classifyId) {
        this.$message.error('请选择要指向的分类！')
        return
      }
      this.$emit('input', this.classifyId)
      const { firstName, secondName, isRecommend } = this.dataSource.filter(
        item => item.id == this.classifyId?.split(',')[1]
      )[0]
      this.SET_POINT_SELECT({
        key: 'classifyTable',
        data: [{ firstName, secondName, isRecommend }]
      })
      this.visible = false
    },
    resetForm() {
      this.visible = false
      this.classifyId = ''
      if (!this.value) {
        this.$emit('input', '')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.footer-button {
  @include flex();
}
</style>
